import { Outlet } from "react-router-dom";
import Sidebar from "./sidebar";
import useIsCollapsed from "@/hooks/use-is-collapsed";
import { Toaster } from "@/components/ui/toaster";
import ThemeSwitch from "@/components/theme-switch";
import { UserNav } from "@/components/user-nav";

export default function AppShell() {
  const [isCollapsed, setIsCollapsed] = useIsCollapsed();
  return (
    <div className="relative h-full overflow-hidden bg-background">
      <Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
      <main
        id="content"
        className={`overflow-x-hidden pt-16 transition-[margin] md:overflow-y-scroll md:pt-0 ${
          isCollapsed ? "md:ml-14" : "md:ml-64"
        } h-full`}
      >
        <div className="ml-auto flex justify-end items-center space-x-4 mx-3 px-3 h-16">
          <ThemeSwitch />
          <UserNav />
        </div>
        <Outlet />
        <div className="ml-auto flex justify-center items-center space-x-4 mx-3 px-3 h-16">
          &copy; 北京大学第三医院版权所有
        </div>
      </main>
      <Toaster />
    </div>
  );
}
